<!--
 * @Description: 
 * @Author: charles
 * @Date: 2020-11-03 14:05:02
 * @LastEditors: charles
 * @LastEditTime: 2021-06-29 21:59:46
-->
<template>
  <div>
    <!-- 头部 -->
    <Header></Header>
    <!-- /头部 -->
    <!-- 体部 -->
    <div class="content">
      <!-- 标题 -->
      <div class="wrapper">
        <div class="title">{{ category.name }}</div>
        <!-- 文章内容 -->
        <div class="inner_content">
          <!-- 左侧部分 -->
          <div class="left">
            <!-- 展示文章数据 -->
            <!-- v-if=“表达式” -->
            <!-- v-else -->
            <ul v-if="this.total > 0">
              <li
                style="line-height: 2em; border-bottom: 1px solid #ededed"
                v-for="item in dataList"
                :key="item.id"
                @click="toDetails(item.id)"
              >
                <div class="title">{{ item.title }}</div>
                <div class="time">
                  <!-- 发表时间 -->
                  <span style="margin-right: 15px">{{
                    item.publishTime | fmtTime
                  }}</span>
                  <!-- 阅读次数 -->
                  <span>{{ item.readTimes }}</span>
                </div>
              </li>
            </ul>
            <!-- 如果没有数据显示暂无数据 -->
            <div v-else style="text-align: center; color: red; font-size: 30px">
              暂无数据
            </div>
            <!-- 分页按钮 -->
            <el-pagination
              hide-on-single-page
              :background="true"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="catePage.page"
              :page-sizes="[2, 5, 6, 8]"
              :page-size="catePage.pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="total"
            >
            </el-pagination>
            <!-- /分页按钮 -->
          </div>
          <!-- 右侧部分 -->
          <div class="right" >
            <ul>
              <li
                @click="toDetails(item.id)"
                v-for="item in dataList"
                :key="item.id"
                style="
                  line-height: 2em;
                  border-bottom: 1px solid #ededed;
                  text-overflow: ellipsis;
                  white-space: nowrap;
                  overflow: hidden;
                "
              >
                {{ item.title }}
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
    <!-- /体部 -->
    <!-- 尾部 -->
    <Footer></Footer>
    <!-- /尾部 -->
  </div>
</template>
<script>
// 引入头部底部组件
import Header from "@/components/Header.vue";
import Footer from "@/components/Footer.vue";
import { get, post } from "@/utils/request.js";
export default {
  // 注册组件
  components: {
    Header,
    Footer,
  },
  data() {
    return {
      // 存放page pagesize total
      catePage: {},
      // 文章总条数
      total: 0,
      category: {},
      params: {
        page: 1,
        pageSize: 2,
      },
      dataList: [],
      categoryList: [],
    };
  },
  // 监听器 侦听器 监听数据变化
  watch: {
    "$route.query": {
      handler(query) {
        this.category = this.$route.query;
        this.loadCategory();
      },
      // 深度监听
      deep: true,
    },
  },
  methods: {
    // 跳转到文章详情页面
    toDetails(id) {
      // 编程式导航
      this.$router.push({
        path: "project",
        query: { id },
      });
    },
    // 页码发生变化时触发的函数
    handleCurrentChange(page) {
      console.log(page, "当前页数");
      this.params.page = page;
      // 重新请求文章
      this.loadCategory();
    },
    // 分页条数发生变化时触发的方法
    handleSizeChange(pageSize) {
      console.log(pageSize, "每页多少条");
      this.params.pageSize = pageSize;
      // 重新请求文章
      this.loadCategory();
    },
    // 封装请求栏目对应文章的方法
    loadCategory() {
      // 将根据不同栏目id查询不同文章
      this.params.categoryId = this.category.id;
      get("/index/article/pageQuery", this.params).then((res) => {
        console.log(res, "查询文章");
        this.dataList = res.data.list;
        this.total = res.data.total;
        this.catePage = res.data;
      });
    },
    // 请求栏目对应的文章
    loadArticle() {
      get("/index/article/findCategoryArticles").then((res) => {
        console.log(res);
        this.categoryList = res.data;
      });
    },
  },
  created() {
    // 接收编程式导航传递的参数
    // console.log(this.$route.query);
    this.category = this.$route.query; //{id,name}
    this.loadCategory();
    this.loadArticle();
  },
};
</script>
<style lang="scss">
.content {
  padding: 20px;
  background-color: #ecf6f2;
  .wrapper {
    // &是直接父元素
    & > .title {
      font-size: 28px;
      color: #003262;
      line-height: 2em;
      cursor: pointer;
    }
    & > .title:hover {
      color: black;
    }
    .inner_content {
      // 清除浮动
      overflow: hidden;
      & > div {
        height: 500px;
        background-color: #fff;
        // 圆角边框
        border-radius: 5px;
        float: left;
      }
      .left {
        width: 70%;
        margin-right: 20px;
        .el-pagination {
          text-align: center;
          color: #028b39;
          .number {
            background-color: #028b39;
          }
        }
        li:hover {
          color: red;
          cursor: pointer;
        }
      }
      .right {
        width: 25%;
      }
    }
  }
}
</style>